<template>
  <div>
    <we-editor :handle="handle" v-model:html="html" />
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css'
import { WeEditor, useWangEditor } from 'wangeditor5-for-vue3'
import { onMounted, ref } from 'vue'

const { handle, opts } = useWangEditor({
  // 防抖时长。当会触发重载的配置项发生变化 365ms 后，编辑器会重载
  reloadDelary: 365,
  // 编辑器配置
  toolbar: {
    config: {
      excludeKeys: [
        "bgColor",
        "fontSize",
        "fontFamily",
        "lineHeight",
        'group-more-style', // 排除菜单组，写菜单组 key 的值即可
        'group-video',
        "emotion"
      ]
    }
  },
  // 菜单栏配置
  editable: {
    config: {
      placeholder: '请开始你的表演'
    }
  }
} as any)
opts.editable.mode = 'simple'
const html = ref(``)

onMounted(() => {
  setTimeout(() => {
    // html.value = `<center><table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table></center>`
    html.value = `<p style="color: red;">11111111</p><p style="color: red;">11111111</p>`
  }, 0)
})
</script>

<style scoped></style>